<!-- 创建时间: 2019年10月15日 星期二 10:51 统一管理登录和注册页面并进行切换 -->
<template>
    <div class="page_container">
        <h3 class="login_title text-center">{{ $route.path == "/LoginPage/Register" ? "注册账号":"登录" }}</h3>
        <div class="user_logo text-center">
            <img :src="this.$store.getters.getUserPhoto" alt />
        </div>

        <div class="register_forget text-center">
            <router-link
                :to="$route.path=='/LoginPage/Login'?'/LoginPage/Register':'/LoginPage/Login'"
            >{{ $route.path == "/LoginPage/Login" ? "注册账号":"登录" }}</router-link>&nbsp;|
            <a href="#">忘记密码</a>&nbsp;|
            <router-link to="/">首页</router-link>
        </div>

        <transition mode="out-in">
            <router-view></router-view>
        </transition>

        <div class="other_login">
            <div class="qq_login">
                <img src="img/qq.png" alt />
            </div>
            <div class="weixi_login">
                <img src="img/weixin.png" alt />
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import qq from "../../img/qq.png";
// import weixi from "../../img/weixin.png";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../scss/transition.scss");
.page_container {
    position: relative;
    margin-top: 40px;
    .login_title {
        box-shadow: 0px 2px 3px lightgray;
        padding: 10px 0px;
    }
    .user_logo {
        margin-bottom: 16px;
        img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }
    }
    .register_forget {
        margin-top: 10px;
        a {
            text-decoration: none;
        }
    }
    .other_login {
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        .qq_login,
        .weixi_login {
            border: 1px solid lightgray;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 45px;
            img {
                width: 32px;
                height: 32px;
            }
        }
    }
}
</style>